{% extends "base.html" %}

    {% block  role%}
        {% if msg.role== 0 %}
               超级管理员
        {% else %} 
               普通用户
        {% endif %}
   {% endblock%}
   
   {% block  username%}
   {{msg.username}}
   {% endblock%}
     <!--导航 -->
    {% block  navigation%}
        <a href="/userlist">用户列表 </a>
    {% endblock%}


{% block content%}
<!--正文 -->
<a  class="btn btn-sm btn-primary"  id="Addusers" style="float:left"> 添加用户</a> 
<br />
<br />
<table class="table table-striped table-bordered table-hover " id="editable">
<thead>
    <tr>
        <th class="text-center">用户名</th>
        <th class="text-center">姓名</th>
        <th class="text-center">角色</th>
        <th class="text-center">状态</th>
        <th class="text-center">操作</th>
    </tr>
</thead>
<tbody>
          {% for item in result%}
        <tr class="gradeX">
                <td class="text-center ">
					<a list_id='{{item.id}}' class="detail" >{{item.username}}</a>
				</td>
                <td class="text-center">{{item.name_cn}}</td>
                    {% if item.role == 0 %}
                        <td class="text-center">超级管理员</td>
                     {% else %}
                        <td class="text-center">普通用户</td>
                     {% endif %}
                
                    {% if item.status == 0 %}
                        <td class="text-center" style="color:green">正常</td>
                    {% else %}
                        <td class="text-center" style="color:red">锁定</td>
                    {% endif %}
                <td class="text-center">
                    <button data-id="{{item.id}}" class="btn btn-xs btn-info update">编辑</button>
                    <button data-id="{{item.id}}" class="btn btn-xs btn-danger del ">删除</button>
                </td>
            </td>
         </tr>
         {% endfor %}
 </tbody>
</table>

<!--用户添加模态框-->
<div class="modal fade"  id ="adduserModal">   
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">添加用户</h4> 
      </div>
      <div class="modal-body">
        <p hidden id="uperrorMsg" class="text-danger" style="color:red"></p> <!-- for error msg-->
            <form id="adduserForm" class="form-horizontal adduser nice-validator n-yellow" novalidate="novalidate">
            <div class="form-group">
                <label for="username" class="col-sm-2 control-label">用户名<span class="red-fonts">*</span></label>
                <div class="col-sm-8">
                    <input id="addusername" name="username" placeholder="username" type="text" class="form-control"  datatype="s5-16" errormsg="昵称至少5个字符,最多16个字符！" >
                </div>
            </div><!--username-->
            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <label for="name" class="col-sm-2 control-label">姓名<span class="red-fonts">*</span></label>
                <div class="col-sm-8">
                    <input id="addname_cn" name="name_cn" placeholder="name_cn" type="text" class="form-control" datatype="s2-4" errormsg="请填写至少二个中文字符">
                </div>
            </div><!--name-->
            <div class="form-group">
                   <label for="name" class="col-sm-2 control-label">密码<span class="red-fonts">*</span></label>
                    <div class="col-sm-8">
                        <input id="addpassword" name="password" placeholder="Password" type="password" class="form-control" aria-required="true" data-tip="密码" datatype="s6-16" errormsg="密码太短了">
                         </div>
             </div> <!--password-->

            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <label for="mobile" class="col-sm-2 control-label">Mobile<span class="red-fonts">*</span></label>
                <div class="col-sm-8">
                    <input id="addmobile" name="mobile" placeholder="mobile" class="form-control" datatype="m" errormsg="电话格式错误">
                </div>
            </div><!--mobile-->

            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <label for="email" class="col-sm-2 control-label">Email<span class="red-fonts">*</span></label>
                <div class="col-sm-8">
                    <input id="addemail" name="email" type="email" placeholder="email" class="form-control" datatype="e" errormsg="邮箱格式错误">
                </div>
            </div><!--Email-->
            <div class="hr-line-dashed"></div>
            <div class="form-group">
            <label for="role" class="col-sm-2 control-label">角色<span class="red-fonts">*</span></label>
                <div class="col-sm-8">
                    <div class="col-sm-4">
                        <div class="radio i-checks">
                            <label><input type="radio" value="0" name="role"  >管理员</label>
                        </div> 
                    </div>
                    <div class="col-sm-4">
                        <div class="radio i-checks">
                            <label><input type="radio" value="1" name="role" checked  >普通用户</label>
                         </div> 
                    </div>
                </div> 
            </div><!--role-->
            <div class="hr-line-dashed"></div>
            <div class="form-group">
            <label class="col-sm-2 control-label">状态<span class="red-fonts">*</span></label>
              <div class="col-sm-8">
                <div class="col-sm-4">
                    <div class="radio i-checks">
                        <label><input type="radio" value="0"   name = "status"  checked  >启用</label>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="radio i-checks">
                        <label><input type="radio" value="1" name = "status"  >禁用</label>
                    </div>
                </div>
             </div>
        </div> <!--status-->

        <div class="hr-line-dashed"></div>
        <div class="form-group">
            <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="adduserbtn">确认</button>
            </div>
        </div> <!--button-->
        </form> <!--form-->
      </div> <!--modal-body-->

    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->




<!--更新模态窗-->
<div class="modal fade"  id ="updateModal">   
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">更新用户信息</h4> 
      </div>
      <div class="modal-body">
        <p hidden id="uperrorMsg" class="text-danger" style="color:red"></p> <!-- for error msg-->
            <form id="updateForm" class="form-horizontal nice-validator n-yellow" novalidate="novalidate">
            <input type="hidden" id='upid' name="id"><!--update need id-->
            <div class="form-group">
                <label for="username" class="col-sm-2 control-label">用户名<span class="red-fonts">*</span></label>
                <div class="col-sm-8">
                    <input id="username" name="username" placeholder="username" type="text" class="form-control" readonly="">
                </div>
            </div><!--username-->
            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <label for="name" class="col-sm-2 control-label">姓名<span class="red-fonts">*</span></label>
                <div class="col-sm-8">
                    <input id="name_cn" name="name_cn" placeholder="name_cn" type="text" class="form-control">
                </div>
            </div><!--name-->
            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <label for="mobile" class="col-sm-2 control-label">Mobile<span class="red-fonts">*</span></label>
                <div class="col-sm-8">
                    <input id="mobile" name="mobile" placeholder="mobile" class="form-control">
                </div>
            </div><!--mobile-->
            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <label for="email" class="col-sm-2 control-label">Email<span class="red-fonts">*</span></label>
                <div class="col-sm-8">
                    <input id="email" name="email" type="email" placeholder="email" class="form-control">
                </div>
            </div><!--Email-->
            <div class="hr-line-dashed"></div>
            <div class="form-group">
            <label for="role" class="col-sm-2 control-label">角色<span class="red-fonts">*</span></label>
                <div class="col-sm-8">
                    <div class="col-sm-4">
                        <div class="radio i-checks">
                            <label><input class='roles'  type="radio" value="0" name="role"  >管理员</label>
                        </div> 
                    </div>
                    <div class="col-sm-4">
                        <div class="radio i-checks">
                            <label><input class='roles' type="radio" value="1" name="role"  >普通用户</label>
                         </div> 
                    </div>
                </div> 
            </div><!--role-->
            <div class="hr-line-dashed"></div>
            <div class="form-group">
            <label class="col-sm-2 control-label">状态<span class="red-fonts">*</span></label>
              <div class="col-sm-8">
                <div class="col-sm-4">
                    <div class="radio i-checks">
                        <label><input class='user_status' type="radio" value="0"   name = "status"   >启用</label>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="radio i-checks">
                        <label><input class='user_status'  type="radio" value="1" name = "status"  >禁用</label>
                    </div>
                </div>
             </div>
        </div> <!--status-->

        <div class="hr-line-dashed"></div>
        <div class="form-group">
            <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="updatebtn">确认</button>
            </div>
        </div> <!--button-->
        </form> <!--form-->
      </div> <!--modal-body-->

    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->



<!--详情模态窗-->
<div class="modal fade" id='infoModel'>
  <div class="modal-dialog">
    <div class="modal-content">
    <div class="modal-header">
	    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	     <h4 class="modal-title">详情</h4>
    </div><!--header-->
    <div class="modal-body">
        <div class="form-group">
            <label class="control-label">用户名</label>
             <div class="controls">
                        <span id="detail_username" ></span>
            </div>
        </div> <!--detail detail_name_cn    end-->
		
        <div class="form-group">
            <label class="control-label">中文名字</label>
             <div class="controls">
                        <span id="detail_name_cn" ></span>
            </div>
        </div> <!--detail detail_mobile end-->
        <div class="form-group">
            <label class="control-label">手机号码</label>
             <div class="controls">
                        <span id="detail_mobile" ></span>
            </div>
			
        </div> <!--detail desc end-->
        <div class="form-group">
            <label class="control-label">邮箱</label>
             <div class="controls">
                        <span id="detail_email"></span>
            </div>
        </div> <!--detail deal desc end-->

		
    </div><!--body-->
    <div class="modal-footer">
      	<button type="button" class="btn btn-default update-cancel" data-dismiss="modal">关闭</button>
   </div><!--footer-->

    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->




<script>

$('#editable').DataTable({
        "bDestroy":true, //加上这个，一旦datatable的数据有增加或者删除，会销毁原有的，重新获取
        "language": {
                "lengthMenu": "每页 _MENU_ 条记录",
                "zeroRecords": "没有找到记录",
                "sInfo": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 ),显示第 _START_ 至 _END_ 项(总共 _TOTAL_ 项)",
                "infoEmpty": "无记录",
                "infoFiltered": "(从 _MAX_ 条记录过滤)",
                "sSearch": "搜索:",
                "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上一页",
                "sNext": "下一页",
                "sLast": "末页"
                } 
        },
        "order": [[ 1, "asc" ]] 
});


</script>   

<script src="/static/js/userlist.js"></script>
{% endblock %}

